
<template>
  <transition>
    <div class="search" ref="search">
      <div class="search-box-wrapper">
        <i class="icon-back" @click="back"></i>
        <input type="text" placeholder="搜索歌曲、歌手" v-model="query" class='box' ref="query">
        <i class="icon-dismiss" v-show='query' @click="clearQuery"> </i>
      </div>
      <confirm ref="confirm" text="是否清空所有搜索历史" confirmBtnText="清空" @confirm="clearSearchHistory"></confirm>
      <quick-search :query='query' :history-query='historyQuery' />
      <scroll :list='hotSearch' class="hotsearch-scroll" ref="scroll">
        <div>
          <div class="history-search" v-show="hotSearch.length&&!query">
            <h2 class="text">
              <span class="text">搜索历史</span>
              <i class="icon-clear" @click="showConfirm"></i>
            </h2>
            <div class='history-scroll'>
              <ul class='history-list' v-show="historyQuery.length">
                <li v-for="(v,i) in historyQuery" :key="i" @click="addQuery(v)">{{v}}</li>
              </ul>
            </div>
            <div class="hot-search" v-show='hotSearch.length'>
              <h2 class="text">热门搜索</h2>
              <ul class='hotsearch-list'>
                <li v-for='(v,i) in hotSearch' :key='i' class='hotsearch-item' @click="addQuery(v.k)">
                  <span class='index' :class="[i<= 2 ? 'active-index':'']">{{i+1}}</span>
                  <span class='name' :class="[i<= 2 ? 'active-name':'']">{{v.k}}</span>
                  <span class='num'>{{v.n}}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </scroll>
    </div>
  </transition>
</template>

<script>
import Scroll from 'components/base/Scroll'
import QuickSearch from 'components/quickSearch/QuickSearch'
import Confirm from 'components/base/Confirm'
import { getHotSearch } from 'api/search.js'
import { mapState } from 'vuex'
import { playListMixin } from 'common/js/mixin'
export default {
  components: { Scroll, QuickSearch, Confirm },
  name: 'searchIndex',
  mixins: [playListMixin],
  data() {
    return {
      query: '',
      hotSearch: []
    }
  },
  computed: {
    ...mapState(['historyQuery'])
  },
  created() {
    this.loadHotSearch()
  },
  methods: {
    handlePlayList(playList) {
      const bottom = playList.length ? '60px' : ''
      this.$refs.search.style.bottom = bottom
      this.$refs.scroll.refresh()
    },
    showConfirm() {
      this.$refs.confirm.show()
    },
    clearSearchHistory() {
      this.$store.commit('clearHistroyQuery')
    },
    clearQuery() {
      this.query = ''
      this.$refs.query.focus()
    },
    addQuery(item) {
      this.query = item.replace(/\s+/g, '')
    },
    back() {
      this.$router.push('/')
    },
    async loadHotSearch() {
      const { data } = await getHotSearch()
      this.hotSearch = data.data
    }
  },
  activated() {
    this.query = ''
  }
}
</script>

<style scoped>
.search {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-color: #222;
}
.search-box-wrapper {
  display: flex;
  align-items: center;
  height: 40px;
  margin: 20px;
  position: relative;
  background-color: #111;
}

.icon-back {
  font-size: 24px;
  color: var(--color-theme);
}
.box {
  flex: 1;
  outline: none;
  padding: 0 15px;
  line-height: 18px;
  font-size: 14px;
  background-color: #111;
  color: #fff;
}
.icon-dismiss {
  position: absolute;
  right: 5px;
}
.hotsearch-scroll {
  position: absolute;

  height: 100%;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  padding: 0 20px;
}
.history-search h2 {
  line-height: 30px;
  display: flex;
  justify-content: space-between;
  color: var(--color-theme);
}
.history-scroll {
  min-height: 50px;
}
.history-list {
  display: flex;
  flex-wrap: wrap;
}
.history-list li {
  padding: 2px;
  margin: 5px;
}
.hotsearch-list {
  font-size: 14px;
}
.hotsearch-item {
  position: relative;
  line-height: 20px;
}
.hotsearch-item .index {
  position: absolute;
  left: 0;
}
.hotsearch-item .name {
  margin-left: 34px;
}
.hotsearch-item .num {
  position: absolute;
  right: 0;
}
.active-index,
.active-name {
  color: var(--color-theme);
}
</style>